<template>
  <div>
    <div v-loading="Loading">
      <div class="infoBox">
        <div class="title">
          <span>基本信息</span>
          <el-button v-permission="['BUSSINESSROLEMANAGE_UPDATE_BUTTON']" size="mini" type="primary"
                     @click.native="handleUpdate(roleInfo)">修改</el-button>
        </div>
        <div class="infoDetail">
          <div class="info"><span class="item-label">角色编码</span><span class="item-value">{{ roleInfo.roleCode }}</span></div>
          <div class="info"><span class="item-label">角色名称</span><span class="item-value">{{ roleInfo.roleName }}</span></div>
          <div class="info"><span class="item-label">角色类型</span><span class="item-value">{{ roleInfo.roleType===1?'平台角色':'三方应用角色' }}</span></div>
          <div class="info"><span class="item-label">角色状态</span><span :class="roleInfo.statusFlag ===1?'item-value-green':'item-value-red'">{{ roleInfo.statusFlag ===1?'已启用':'已停用' }}</span></div>
          <div class="info"><span class="item-label">创建人</span><span class="item-value">{{ roleInfo.createUserName?roleInfo.createUserName:'-' }}</span></div>
          <div class="info"><span class="item-label">创建时间</span><span class="item-value">{{ roleInfo.createTime?roleInfo.createTime:'-' }}</span></div>
          <div class="info"><span class="item-label">修改人</span><span class="item-value">{{ roleInfo.updateUserName?roleInfo.updateUserName:'-' }}</span></div>
          <div class="info"><span class="item-label">修改时间</span><span class="item-value">{{ roleInfo.updateTime?roleInfo.updateTime:'-' }}</span></div>
        </div>
      </div>
      <div class="infoBox">
        <div class="title">
          <span>权限信息</span>
        </div>
        <div class="infoDetail">
          <el-tree v-if="perInfoList.length>0" :data="perInfoList" :props="defaultProps"
                   :default-expand-all="false" />
          <span v-else class="nodata">暂无数据</span>
        </div>
      </div>
      <div class="infoBox">
        <div class="title">
          <span>数据范围</span>
        </div>
        <div class="infoDetail">
          <template v-if="roleInfo.scopeType == 1">
            <el-tag
              v-for="dict in dict.type.orgType.filter(item=>{return item.value == '1'})"
              :key="dict.value"
              size="medium"
            >
              所属{{ dict.label }}
            </el-tag>
          </template>
          <template v-else-if="roleInfo.scopeType == 2">
            <el-tag
              v-for="dict in dict.type.orgType.filter(item=>{return item.value == '2'})"
              :key="dict.value"
              size="medium"
            >
              所属{{ dict.label }}
            </el-tag>
          </template>

          <div v-else-if="roleInfo.scopeType == 4" class="dataScope">
            <div v-for="(item,index) in roleInfo.sysAcRoleGrantOrgs" :key="index" class="dataScopeItem">
              <el-image style="width: 28px; height: 28px;" :src="require('@/framework/assets/orgIcon.png')" />
              <div class="text">
                <div class="orgName">{{ item.grantOrgName }}</div>
                <div class="org">{{ item.grantOrgPath }}</div>
              </div>
            </div>
          </div>
          <template v-else>
            <el-tag
              v-for="dict in dict.type.orgType.filter(item=>{return item.value == '2'})"
              :key="dict.value?'3':''"
              size="medium"
            >
              所属{{ dict.label }}及以下
            </el-tag>
          </template>
        </div>
      </div>
    </div>
    <BussinessRoleEdit ref="BussinessRoleRef" @getRoleList="getRoleList" />
  </div>
</template>
<script>
import BussinessRoleEdit from './BussinessRoleEdit.vue'
import { getRoleFunctionChooseTree } from '@/framework/api/authCenter/bussinessRoleManage'

export default {
  name: 'RoleDetail',
  dicts: ['orgType'],
  components: {
    BussinessRoleEdit
  },
  props: {
    roleInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      Loading: false,
      perInfoList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    roleInfo(newValue, oldValue) {
      if (newValue) {
        this.getPerInfoList(newValue.roleId)
      }
    }
  },
  created() {
    if (this.roleInfo.roleId) {
      this.getPerInfoList(this.roleInfo.roleId)
    }
  },
  methods: {
    getPerInfoList(roleId) {
      this.Loading = true
      getRoleFunctionChooseTree({ roleId }).then((res) => {
        this.perInfoList = res.data
        this.Loading = false
      })
    },
    handleUpdate(data) {
      this.$refs.BussinessRoleRef.openDrawer('update', data)
    },
    getRoleList(data) {
      this.$emit('getRoleList', data)
    }
  }
}
</script>
<style lang="scss" scope>
.infoBox{
    border-bottom: 1px solid #E4E7ED;
    margin-bottom: 24px;
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
    height: 28px;
    font-size: 14px;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #131414;
    line-height: 28px;
    margin-bottom: 16px;
}
.infoDetail{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    .nodata{
      height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #606266;
      line-height: 24px;
    }
    .info{
      width: 25%;
      // margin-right: 40px;
      margin-bottom: 16px;
        .item-label{
          display: inline-block;//设置为行内块元素
            width: 58px;
            font-size: 14px;
            line-height: 24px;
            color: #131414;
            margin: 4px 16px 4px 0;
            text-align: left;
        }
        .item-value{
            font-size: 13px;
            color: #606266;
        }
        .item-value-red{
          font-size: 13px;
            color: #F56C6C;
        }
        .item-value-green{
          font-size: 13px;
            color: #67C23A;
        }
    }
    .dataScope{
        display: flex;
        flex-wrap: wrap;
        .dataScopeItem{
            width: 276px;
            height: 51px;
            margin-right: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .text{
                margin-left: 8px;
                .orgName{
                    font-size: 14px;
                    color: #131414;
                }
                .org{
                    font-size: 11px;
                    color: #909399;

                }
            }

    }
    }
   .el-tree__empty-text{
      margin-left: 20px !important;
    }

}
}
</style>
